<template>
  <div>

    <card style="margin-bottom:10px" v-if="$store.state.superAdmin == 'true'">
      <el-select style="width:100%;" v-model="museumId" @change="change" filterable placeholder="请选择博物馆">
          <el-option
            v-for="item in museumList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
      </el-select>
    </card>

    <Card>
      <Spin fix size="large" v-if="spinShow1"></Spin>
      <p slot="title">性别及年龄分布</p>
      <a href="#" slot="extra" @click.prevent="getAgeResult">刷新</a>
      <div style="display: flex;">
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time1"
          :options="options"
          @on-change="onChange1"
        ></DatePicker>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div id="echarts1" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts"></div>
        <div id="echarts2" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts"></div>
      </div>
      <div class="title">
        <p>性别分布</p>
        <p>年龄分布</p>
      </div>
    </Card>

    <Card style="margin-top:10px;">
      <Spin fix size="large" v-if="spinShow3"></Spin>
      <p slot="title">地区分布</p>
      <a href="#" slot="extra" @click.prevent="getProvinceCities">刷新</a>
      <div style="display: flex;">
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time3"
          :options="options"
          @on-change="onChange5"
        ></DatePicker>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div id="echarts5" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts2"></div>
        <div id="echarts6" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts2"></div>
      </div>
      <div class="title">
        <p>省份分布</p>
        <p>城市分布</p>
      </div>
    </Card>

    <Card style="margin-top:10px;">
      <Spin fix size="large" v-if="spinShow4"></Spin>
      <p slot="title">累计预约分析</p>
      <a href="#" slot="extra" @click.prevent="getDeduplicationAppointment">刷新</a>
      <div style="display: flex;">
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time4"
          :options="options"
          @on-change="onChange6"
        ></DatePicker>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div class="cardDiv">
          <div class="cardDiv_title">累计预约人数（同一用户多次预约不重复计算）</div>
          <div class="cardDiv_content">{{num1}}<span>人</span></div>
        </div>
        <div class="cardDiv">
          <div class="cardDiv_title">累计预约人次</div>
          <div class="cardDiv_content">{{num2}}<span>人</span></div>
        </div>
      </div>
    </Card>

  </div>
</template>

<script>
import "echarts/map/js/china.js";
export default {
data() {
    return {
      clearable: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now()
        },
        shortcuts: [
          {
            text: "近7天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "近30天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: "近90天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          },
          {
            text: "近180天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              return [start, end];
            }
          },
          {
            text: "近360天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              return [start, end];
            }
          },
        ]
      },
      screenWidth: document.body.clientWidth,
      width: 335,

      spinShow1: false,
      time1: [],

      spinShow3: false,
      time3: [],

      spinShow4: false,
      time4: [],
      num1: '',
      num2: '',


      museumId: "1",
      museumList: []
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getmuseumList();
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = this.$store.state.museumId;
      } else {
        this.museumId = "";
      }
      this.getDay();
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth(val) {
      let that = this;
      setTimeout(function() {
        var myChart1 = that.echarts.init(document.getElementById("echarts1"));
        var myChart2 = that.echarts.init(document.getElementById("echarts2"));
        var myChart5 = that.echarts.init(document.getElementById("echarts5"));
        var myChart6 = that.echarts.init(document.getElementById("echarts6"));
        myChart1.resize();
        myChart2.resize();
        myChart5.resize();
        myChart6.resize();
      }, 300);
    },
    "$store.state.isCollapse"(val) {
      if (val) {
        this.width = 150;
      } else {
        this.width = 335;
      }
      let that = this;
      setTimeout(function() {
        var myChart1 = that.echarts.init(document.getElementById("echarts1"));
        var myChart2 = that.echarts.init(document.getElementById("echarts2"));
        var myChart5 = that.echarts.init(document.getElementById("echarts5"));
        var myChart6 = that.echarts.init(document.getElementById("echarts6"));
        myChart1.resize();
        myChart2.resize();
        myChart5.resize();
        myChart6.resize();
      }, 300);
    }
  },
  methods: {
    getmuseumList() {
      this.spinShow1 = true;
      this.spinShow3 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          // this.museumId = '1223'
          this.getDay();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    change() {
      this.getAgeResult();
      this.getProvinceCities();
      this.getDeduplicationAppointment()
    },
    // 得到默认时间
    getDay() {
      this.time1 = [];
      this.time3 = [];
      this.time4 = [];
      this.time1.push(this.getTime(this.getTime4(7)));
      this.time3.push(this.getTime(this.getTime4(7)));
      this.time4.push(this.getTime(this.getTime4(7)));
      this.time1.push(this.getTime(this.getTime4(0)));
      this.time3.push(this.getTime(this.getTime4(0)));
      this.time4.push(this.getTime(this.getTime4(0)));
      this.getAgeResult();
      this.getDeduplicationAppointment()
    },

    // 年龄分布
    getAgeResult() {
      this.spinShow1 = true;
      var start = "",
        end = "";
      if (this.time1[0] != "" && this.time1[1] != "") {
        start = this.time1[0];
        end = this.time1[1];
      }
      this.$http(
        "/stage/tourist/getAgeResult",
        {
          start: start,
          end: end,
          museumId: this.museumId
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.draw2(res.data.data);
            this.getProvinceCities();
            this.getSexResult();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 性别分布
    getSexResult() {
      var start = "",
        end = "";
      if (this.time1[0] != "" && this.time1[1] != "") {
        start = this.time1[0];
        end = this.time1[1];
      }
      this.$http(
        "/stage/tourist/getSexResult",
        {
          start: start,
          end: end,
          museumId: this.museumId
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.draw1(res.data.data);
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow1 = false;
        }
      );
    },
    // 改变条件
    onChange1(data) {
      this.time1 = data;
      this.getAgeResult();
    },
    draw1(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].name = data[i].sex;
        data[i].value = data[i].num;
      }
      let dom = document.getElementById("echarts1");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        color: ["#1AAD19", "#EAA087", "#19be6b"],
        tooltip: {
          trigger: "item",
          formatter: "{b} ： {c} 人( {d}% )"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: 0,
          top: 20,
          bottom: 0,
          data: name
        },
        series: [
          {
            name: "性别比例",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: data
          }
        ]
      });
    },
    draw2(data) {
      let xData = [],
        yData = [];
      for (let i = 0; i < data.length; i++) {
        xData.push(data[i].ageRange);
        yData.push(data[i].num);
      }
      let dom = document.getElementById("echarts2");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        color: ["#1AAD19", "#EAA087", "#19be6b"],
        tooltip: {
          trigger: "item",
          formatter: "{b} ： {c} 人"
        },
        xAxis: {
          data: xData,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "black"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          type: "value"
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: yData,
            type: "bar"
          }
        ]
      });
    },

    // 省份城市
    getProvinceCities() {
      this.spinShow3 = true;
      var start = "",
        end = "";
      if (this.time3[0] != "" && this.time3[1] != "") {
        start = this.time3[0];
        end = this.time3[1];
      }
      this.$http(
        "/stage/tourist/getProvinceResult",
        {
          start: start,
          end: end,
          museumId: this.museumId
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.draw5(res.data.data);
            this.draw6(res.data.data);
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow3 = false;
        }
      );
    },
    // 改变条件
    onChange5(data) {
      this.time3 = data;
      this.getProvinceCities();
    },
    onChange6(data){
      this.time4 = data
      this.getDeduplicationAppointment()
    },
    draw5(data) {
      var newData = data;
      // for (let i = 0; i < newData.length; i++) {
      //   if (newData[i].province.charAt(newData[i].province.length - 1) == "省") {
      //     newData[i].province = newData[i].province.substr(0,newData[i].province.length - 1)
      //   }
      // }
      for (let i = 0; i < newData.length; i++) {
        newData[i].name = newData[i].province;
        newData[i].value = newData[i].num;
      }
      let dom = document.getElementById("echarts5");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        tooltip: {
          trigger: "item"
        },
        visualMap: {
          show: true,
          x: "left",
          y: "20",
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea"
          ]
        },
        series: [
          {
            name: "地区分布",
            type: "map",
            zoom: 1.1,
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: newData
          }
        ]
      });
    },
    draw6(data) {
      let source = [["", ""]];
      for (let i = 0; i < data.length; i++) {
        source[i + 1] = [];
        source[i + 1][0] = data[i].province;
        source[i + 1][1] = data[i].num;
      }
      let dom = document.getElementById("echarts6");
      let myChart = this.echarts.init(dom);
      // 省份横条型图
      myChart.setOption({
        color: ["#1AAD19"],
        tooltip: {
          trigger: "item",
          formatter: "{c}"
        },
        dataset: {
          source: source
        },
        label: {
          show: true,
          color:["#484848"],
          position: 'right'
        },
        grid: { containLabel: true },
        xAxis: { name: "用户数" },
        yAxis: { type: "category", name: "省份" },
        series: [
          {
            type: "bar"
          }
        ]
      });
    },
    // 累计预约人数(同一用户多次预约不重复计算)
    getDeduplicationAppointment(){
      this.spinShow4 = true
      var start = "",
        end = "";
      if (this.time4[0] != "" && this.time4[1] != "") {
        start = this.time4[0];
        end = this.time4[1];
      }
      this.$http(
        "/stage/tourist/getDeduplicationAppointment",
        {
          start: start,
          end: end,
          museumId: this.museumId
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.getTotalAppointment()
            this.num1 = res.data.data
          } else {
            this.$Message.error(res.data.msg);
            this.spinShow4 = false;
          }
        }
      );
    },
    // 累计预约人次
    getTotalAppointment(){
      var start = "",
        end = "";
      if (this.time4[0] != "" && this.time4[1] != "") {
        start = this.time4[0];
        end = this.time4[1];
      }
      this.$http(
        "/stage/tourist/getTotalAppointment",
        {
          start: start,
          end: end,
          museumId: this.museumId
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.spinShow4 = false;
            this.num2 = res.data.data
          } else {
            this.$Message.error(res.data.msg);
            this.spinShow4 = false;
          }
        }
      );
    },


  }
};
</script>

<style scoped>
.echarts {
  height: 500px;
}
.echarts2 {
  height: 700px;
}
.title {
  width: 100%;
  display: flex;
}
.title p {
  width: 50%;
  text-align: center;
}
.cardDiv{
  width:50%;
  height:200px;
}
.cardDiv_title{
  width:100%;
  height:50px;
  font-weight: bold;
  line-height: 90px;
  font-size: 20px;
  text-align: center;
}
.cardDiv_content{
  width:100%;
  height:150px;
  font-weight: bold;
  line-height: 150px;
  font-size: 60px;
  text-align: center;
  color:#03a616;
}
.cardDiv_content span{
  font-size: 24px
}
</style>